<template>
	<!-- 电梯大修添加/编辑 -->
	<div class="compile">
		<el-dialog :close-on-click-modal='false' :append-to-body='true' :before-close='close' :close-on-press-escape='false'
		 :title="title" :visible.sync="addAndCompileShow">
			<el-form :model="form" :rules="rules" ref="form" v-loading='isLoading' label-width="120px">
				<el-row>
					<el-col :span="10">
						<!-- multiple reserve-keyword filterable remote :remote-method="remoteMethod" -->
						<el-form-item label="电梯注册号" prop="registCode">
							<el-select v-model="form.registCode" placeholder="请选择电梯注册号" size="mini" filterable clearable>
								<el-option :label="item.register_code" :value="item.register_code" v-for="item in registCodeArr" :key='item.id'></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-button type="primary" class='fl' style='margin: 6px;' @click='filterCode'>选择</el-button>
				</el-row>
				<el-row>
					<el-col :span="10">
						<el-form-item label="大修人员" prop="person">
							<el-select v-model="form.person" placeholder="请选择大修人员" size="mini" multiple clearable>
								<el-option :label="item.real_name" :value="item.id" v-for="item in personArr" :key='item.id'></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10">
						<el-form-item label="大修项目">
							<el-select v-model="form.project" placeholder="请选择大修项目" size="mini" multiple clearable>
								<el-option :label="item.value" :value="item.id" v-for="item in projectArr" :key='item.id'></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10">
						<el-form-item label="开始时间" prop="planTime">
							<el-date-picker v-model="form.planTime"  format='yyyy-MM-dd' value-format='yyyy-MM-dd' type="date" placeholder="请选择计划开始时间" size="mini" clearable>
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="10">
						<el-form-item label="结束时间" prop="endTime">
							<el-date-picker v-model="form.endTime" format='yyyy-MM-dd' value-format='yyyy-MM-dd' type="date" placeholder="请选择计划结束时间" size="mini" :disabled="disAbleTime"
							 :picker-options="pickerOptions" clearable>
							</el-date-picker>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="close">取 消</el-button>
				<el-button type="primary" @click="submit('form')" v-loading='ensureBtn'>确 定</el-button>
			</div>
		</el-dialog>
		<secondDialog v-if='innerVisible' :innerVisible='innerVisible' @closeScondDilog='closeScondDilog'></secondDialog>
	</div>
</template>

<script>
	import secondDialog from "./secondDialog.vue"
	import {
		registCode,
		person,
		project,
		planTime,
		endTime
	} from './rule.js'
	import {
		loadFn,
		axiosPost,
		noLoadingPost,
		axiosGet,
		axiosDelete,
		axiosPut,
		moment
	} from "@/common.js";
	export default {
		props: ['addAndCompileShow', 'title'],
		mounted() {
			this.getMessage()
		},
		components: {
			secondDialog
		},
		data() {
			return {
				ensureBtn: false,
				isLoading: true,
				innerVisible: false,
				rules: {
					registCode,
					person,
					project,
					planTime,
					endTime
				},
				form: {
					registCode:'',
					person: [],
					project: [],
					planTime: '',
					endTime: ''
				},
				registCodeArr: [],
				personArr: [],
				projectArr: [{
						id: 1,
						value: '大修项目1'
					},
					{
						id: 2,
						value: '大修项目2'
					},
					{
						id: 3,
						value: '大修项目3'
					},
					{
						id: 4,
						value: '大修项目4'
					}
				],

			}
		},
		computed: {
			disAbleTime() {
				if (this.form.planTime) {
					return false
				} else {
					return true
				}
			},
			pickerOptions() {
				return {
					disabledDate: (time) => {
						return time.getTime() < moment(this.form.planTime)
					}
				}
			}
		},
		methods: {
			//打开dialog
			filterCode() {
				this.innerVisible = true
			},
			closeScondDilog() {
				this.innerVisible = false
			},
			//获取一层dialog数据
			getMessage() {
				axiosGet('/basic/elevator/repair/', {}, (res) => {
					this.isLoading = false
					if (res.code == 0) {
						this.personArr = res.detail.users
						this.registCodeArr = res.detail.elevators
					} else {
						this.$message.error(res.detail.result)
					}
				})
			},
			//根据电梯注册代码搜索
			remoteMethod(query) {
				console.log(query)
			},
			close() {
				this.$emit('closeMask')
			},
			//新建确定
			submit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.ensureBtn = true
						let data = {
							maintenance_type:1,
							register_code:this.form.registCode,
							person:this.form.person,
							start_planning_time:this.form.planTime,
							end_planning_time:this.form.endTime
						}
						noLoadingPost('/manu/elevator/repair/',data,(res)=>{
							this.ensureBtn = false
							if(res.code == 0){
									this.$emit('closeMask',2)
							}else{
								this.$message.error(res.detail.result)
							}
						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.colItem {
		display: flex;
		flex-direction: row;

		.searchCode {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 120px;
		}
	}
</style>
